import React, { useRef, useEffect } from 'react';
import echarts from 'echarts';

const Right = () => {
    const chartContainer = useRef(null);
    let chart = useRef(null);

    useEffect(() => {
        // Initialize ECharts instance
        chart.current = echarts.init(chartContainer.current);

        // Initial chart data
        const data = []; // Replace with your initial data

        // Initial options
        const options = {
            xAxis: {
                type: 'category',
                data: data.map(item => item.label),
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: 'Your Series Name',
                    type: 'bar',
                    data: data.map(item => item.value),
                },
            ],
        };

        // Set options to the chart instance
        chart.current.setOption(options);

        // Cleanup function for unmounting
        return () => {
            if (chart.current) {
                chart.current.dispose();
            }
        };
    }, []); // Empty dependency array ensures this effect runs only once

    // Method to update chart with new data
    const updateChart = (newData) => {
        const options = {
            xAxis: {
                type: 'category',
                data: newData.map(item => item.label),
            },
            series: [
                {
                    data: newData.map(item => item.value),
                },
            ],
        };

        // Update chart options
        chart.current.setOption(options);
    };

    return (
        <div>
            <div ref={chartContainer} style={{ width: '100%', height: '400px' }}></div>
        </div>
    );
};

export default Right;
